<template>
  <view class="my-tabbar">
    <view
      v-for="(item, idx) in tabList"
      :key="item.pagePath"
      class="tabbar-item"
      :class="{ active: idx === activeIdx }"
      @click="switchTab(item, idx)"
    >
      <text :class="['iconfont', item.icon, idx === activeIdx ? 'active-icon' : '']"></text>
      <text class="tabbar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const tabList = [
  { text: '商品列表', pagePath: '/pages/goods_list/goods_list', icon: 'icon-gouwudai' },
  { text: '报表', pagePath: '/pages/report/report', icon: 'icon-baobiao' },
  // { text: '库存', pagePath: '/pages/stock/stock', icon: 'icon-cangku' },
  { text: '我的', pagePath: '/pages/my/my', icon: 'icon-wode' }
]

const activeIdx = ref(0)

function updateActive() {
  const path = getCurrentPages().slice(-1)[0]?.route || ''
  const idx = tabList.findIndex(item => path.endsWith(item.pagePath.replace(/^\//, '')))
  activeIdx.value = idx === -1 ? 0 : idx
}

function switchTab(item, idx) {
  if (activeIdx.value !== idx) {
    uni.switchTab({ url: item.pagePath })
  }
}

onMounted(updateActive)
onShow(updateActive)
</script>

<style scoped lang="scss">
@import '@/static/iconfont.css';
.my-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  z-index: 999;
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 24rpx;
    .iconfont {
      font-size: 44rpx;
      margin-bottom: 6rpx;
      transition: color 0.2s;
    }
    .tabbar-text {
      font-size: 22rpx;
    }
    &.active {
      color: #ff7e2d;
      .iconfont, .tabbar-text {
        color: #ff7e2d;
      }
      .iconfont.active-icon {
        color: #ff7e2d;
      }
    }
  }
}
</style> 